<template>
    <div class="test">
        <h1>恭喜您全部完成</h1>
        <div class="headerimg"><img v-bind:src="headimgurl" alt=""></div>
        <div class="nickname">{{nickname}}</div>
        <img src="static/images/test_main.png" class="main_img" alt="">
    </div>
</template>

<script>
    export default {
        name: 'test',
        data () {
            return {
                nickname : '',
                headimgurl : ''
            }
        },
        created () {
            setTimeout( e => {
                console.log(localStorage.getItem('nickname'))
                console.log(localStorage.getItem('headimgurl'))
                console.log(localStorage.getItem('openid'))
                this.nickname = localStorage.getItem('nickname')
                this.headimgurl = localStorage.getItem('headimgurl')
            },300)
        },
        components : {

        },
        methods : {

        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .test{
        overflow: hidden;
    }
    h1{
        font-size:3.6rem;
        color:#f05c78;
        font-weight: bold;
        text-align: center;
        margin-top:60px;
        margin-bottom:35px;
    }
    .headerimg{
        width:158px;
        height:158px;
        border-radius:158px;
        margin:0px auto;
        overflow: hidden;
        border:5px solid #f05c78;
    }
    .headerimg img{
        width:148px;
        float:left;
    }
    .nickname{
        width:590px;
        height:140px;
        margin:0px auto;
        color:#393939;
        font-size:3.2rem;
        line-height: 5rem;
        text-align: center;
        background:url("../../static/images/test_nickname_bg.png") no-repeat center bottom;
    }
    .main_img{
        display:block;
        margin:0px auto;
    }
</style>
